import React, { useState, useEffect, useRef } from 'react';
import {
  Form,
  Input,
  Button,
  Radio,
  DatePicker,
  InputNumber,
  TreeSelect,
  Col,
  Row,
  Drawer,
  Space
} from 'antd';
import  PicturesWall from '../../components/imgsUpload'
import MapContainer from '../../components/MapContainer';
import { tradeData } from '../../api/trade';
import { shopPub } from '../../api/findShop';
import editor from 'wangeditor'
import moment from 'moment';
const TransPub = () => {
  let onChange = () => { }
  let introRef = useRef()
  let betterRef = useRef()
  let [mapAddress,setMapAddress] = useState('');
  let [isShowMap,setMapShow] = useState(false);
  let [mapObj,setMapObj] = useState(null)
  let [pathList,setPathList] = useState([])
  let [intro,setIntro] = useState('')
  let [better,setBetter] = useState('')
  let [trade,setTrade] = useState([])
  useEffect(() => {
    tradeData().then(res=>{
        console.log(res.data.results)
        let trade = res.data.results.map(item=>{
          return {title:item.tradename,value:item.tradename}
        })
        setTrade(trade)
    })
    let introEditor = new editor(introRef.current)
    introEditor.config.zIndex = 500
    introEditor.create()

    let betterEditor = new editor(betterRef.current)
    betterEditor.config.zIndex = 500
    betterEditor.create()

    introEditor.config.onblur = function (newHtml) {
      setIntro(newHtml) // 获取最新的 html 内容
    }
    betterEditor.config.onblur = function (newHtml) {
      setBetter(newHtml) // 获取最新的 html 内容
    }
  }, [])
  let handleMap = ()=>{
    setMapShow(true)
  }
  let handleClose = (num)=>{
    setMapShow(false)
    num==='1' && setMapAddress(mapObj.address)
  }
  let handleAddress = (mapObj)=>{
    setMapObj(mapObj)
  }
  let handlePathList = (pathlist)=>{
      console.log(pathlist)
      setPathList(pathlist)
  }
  let handleFinish = (info)=>{
    info.postdate = info.postdate.format().split('T')[0];
    info.address = mapObj
    info.pathList = pathList
    info.viewtimes = 0
    info.intro = intro
    info.better = better
    console.log(info);
    shopPub(info).then(res=>{
      console.log(res);
    })
  }
  let initData = {
    shopname:'东城东宝路小区旁边美容院###【租金便宜，客户稳定】',
    acrage:70,
    rent:2600,
    nowbusiness:'美容院',
    suitbusiness:'美发美容',
    shoptype:'1',
    kongzhuan:'2',
    intro:'<p>经营位于某某地段多大面积的临街旺铺xx年经营</p><p><span style="background-color: rgb(249, 150, 59);"><b>位于某某地段多大面积的临街旺铺xx年经营位于某某地段多大面</b></span></p><p>的临街旺铺xx年经营位于某某地段多大面积的临街旺铺xx年</p><p>经位于某某地段多大面积的临街旺铺xx年</p>',
    better:'<p>1、边商业繁荣边商业边商业边商业边商业业繁荣边业繁荣边</p><p><b>2、<font color="#c24f4a">租金便宜年份撒都干啥租金便宜租金便宜租金便宜业繁荣边</font></b></p><p>3、周边高档小区很多年周边高档小区很多年周边高档小区很多年很多年周边高档</p><p>4、<font color="#c24f4a"><b>楼层高空间大</b></font>楼层高空间大楼层高空间大楼层高空间大楼层高空间大楼层高空间大间大楼层高空间大楼层高空间大楼&nbsp; &nbsp;&nbsp;</p>',
    reason:'由于本人有其他事业忙，没有精力兼顾店铺，所以转让，有意的老板来看店！',
    trade:'美发美容',
    linkman:'孙小姐',
    phone:'13412233111',
    postDate:moment('2015-06-06')
    // 1、边商业繁荣边商业边商业边商业边商业业繁荣边业繁荣边

    // 2、租金便宜年份撒都干啥租金便宜租金便宜租金便宜业繁荣边
    
    // 3、周边高档小区很多年周边高档小区很多年周边高档小区很多年很多年周边高档
    
    // 4、楼层高空间大楼层高空间大楼层高空间大楼层高空间大楼层高空间大楼层高空间大间大楼层高空间大楼层高空间大楼    
//     经营位于某某地段多大面积的临街旺铺xx年经营

// 位于某某地段多大面积的临街旺铺xx年经营位于某某地段多大面

// 的临街旺铺xx年经营位于某某地段多大面积的临街旺铺xx年

// 经位于某某地段多大面积的临街旺铺xx年
  }
  return (
    <>
      <Form
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 14,
        }}
        initialValues = {initData}
        scrollToFirstError
        layout="horizontal"
        onFinish = {handleFinish}
      >
        <Form.Item label="铺面名" name="shopname">
          <Input />
        </Form.Item>
        <Form.Item label="面积" name="acrage">
          <InputNumber size="small" min={10} max={1000} value={88}  />
        </Form.Item>
        <Form.Item label="租金" name="rent">
          <InputNumber size="small" min={500} max={100000} value={3000}  />
        </Form.Item>
        <Form.Item label="目前经营" name="nowbusiness">
          <Input />
        </Form.Item>
        <Form.Item label="适合经营" name="suitbusiness">
          <Input />
        </Form.Item>
        <Form.Item label="物业类型" name="shoptype">
          <Radio.Group>
            <Radio.Button value="1">临街商铺</Radio.Button>
            <Radio.Button value="2">商业街商铺</Radio.Button>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="是否可空转" name="kongzhuan">
          <Radio.Group>
            <Radio.Button value="1">可空转</Radio.Button>
            <Radio.Button value="2">不可空转</Radio.Button>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="商铺介绍" name='intro'>
          <div ref={introRef}></div>
        </Form.Item>
        <Form.Item label="店铺优势" name='better'>
          <div ref={betterRef}></div>
        </Form.Item>
        <Form.Item name='reason' label="转店原因">
          <Input.TextArea />
        </Form.Item>
        <Form.Item label="业态" name='trade'>
          <TreeSelect
            treeData={trade}
          />
        </Form.Item>
        <Form.Item label="详细地址" name='address'>
          <Row>
            <Col span='20'>
              <Input readOnly value={mapAddress} />
            </Col>
            <Col span='3'>
              <Button type='primary' onClick={handleMap}>选择地址</Button>
            </Col>
          </Row>
        </Form.Item>
        <Form.Item label="联系人" name="linkman">
          <Input />
        </Form.Item>
        <Form.Item label="联系电话" name="phone">
          <InputNumber size="small" value={15111812615}  />
        </Form.Item>
        <Form.Item label="发布日期" name='postdate'>
          <DatePicker />
        </Form.Item>
        <Form.Item label="铺面图片">
          <PicturesWall handlePathList={handlePathList}/>
        </Form.Item>
        <Form.Item label="发布">
          <Button type='primary' htmlType="submit">确认发布</Button>
        </Form.Item>
      </Form>
      <Drawer
        title="请在地图中选择位置"
        width={600}
        placement='bottom'
        visible = {isShowMap}
        extra={
          <Space>
            <Button type="primary" onClick={()=>{handleClose('')}}>取消</Button>
            <Button type="primary" onClick={()=>{handleClose('1')}}>确定</Button>
          </Space>
        }
        style={{paddingBottom:'50px'}}
      >
        <div>
          <MapContainer handleAddress={handleAddress}/>
        </div>
      </Drawer>
    </>
  );
};

export default TransPub
